<template>
  <ul class="tag" :style="styleContentmenu">
    <li @click.stop="handleCopy">
      <i><CopyOutlined /></i>复制图层
    </li>
    <li @click.stop="handleDel">
      <i><DeleteOutlined /></i>删除图层
    </li>
    <li @click.stop="handleCreateGroup">
      <i><GroupOutlined /></i>创建分组
    </li>
  </ul>
</template>

<script lang="ts" setup>
import {
  CopyOutlined,
  GroupOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
import { computed, defineProps } from "vue";
import shortid from "shortid";
import { useConfig } from "@/stores/datav/useConfig";
import { IConfigStore } from "@/stores/datav/types";
const props = defineProps<{
  contentMenuX: number;
  // 菜单的top坐标
  contentMenuY: number;
  // 菜单的显示状态
  contentMenu: boolean;
  id: string;
}>();
const config: IConfigStore = useConfig();
const handleCopy = () => {
  config.config["box" + shortid.generate().toLowerCase()] = JSON.parse(
    JSON.stringify(config.config[config.currentIndex])
  );
};

const handleCreateGroup = () => {};
const handleDel = () => {
  config.currentIndex = "";
  delete config.config[props.id];
};
const styleContentmenu = computed(() => {
  return {
    left: `${props.contentMenuX}px`,
    top: `${props.contentMenuY}px`,
    display: props.contentMenu ? "block" : "none",
    "z-index": 9999,
  };
});
</script>

<style lang="less" scoped>
.tag {
  width: 160px;
  border-radius: 4px;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  background-color: @layout-sider-background;
  list-style: none;
  padding: 0;
}

.tag > li {
  line-height: 32px;
  height: 32px;
  color: @white;
  padding: 0 6px;
  font-size: 18px;
}

.tag > li:hover {
  cursor: pointer;
  background-color: fade(@primary-color, 10%);
}

.tag > li > i {
  margin-right: 8px;
}

.canvas_draggable_mask {
  width: 100%;
  height: 100%;
  color: @white;
}

.canvas_draggable_mask:hover {
  cursor: move;
}
</style>
